import { View, Text, TouchableOpacity, StyleSheet, SafeAreaView, ScrollView } from "react-native"
import { useDeviceInfo } from "../hooks/useDeviceInfo"
import { createResponsiveStyles } from "../styles/responsive"

interface DashboardScreenProps {
  onStartTraining: () => void
}

export default function DashboardScreen({ onStartTraining }: DashboardScreenProps) {
  const deviceInfo = useDeviceInfo()
  const responsive = createResponsiveStyles(deviceInfo)
  const styles = createStyles(responsive, deviceInfo)

  const stats = [
    { label: "今日训练", value: "3", change: "+2", trend: "up" },
    { label: "平均反应", value: "245ms", change: "-15ms", trend: "up" },
    { label: "准确率", value: "87%", change: "+5%", trend: "up" },
    { label: "连续天数", value: "7", change: "+1", trend: "up" },
  ]

  const projects = [
    {
      name: "反应训练",
      type: "基础训练",
      funded: "245ms",
      growth: "15%",
      partners: "今日",
      roi: "41x",
      partnerCount: "84",
    },
    {
      name: "序列记忆",
      type: "认知训练",
      funded: "87%",
      growth: "23%",
      partners: "准确率",
      roi: "84",
      partnerCount: "92",
    },
    {
      name: "协调训练",
      type: "高级训练",
      funded: "156",
      growth: "8%",
      partners: "次数",
      roi: "9x",
      partnerCount: "92",
    },
  ]

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView contentContainerStyle={styles.scrollContent}>
        {/* Header */}
        <View style={styles.header}>
          <View style={styles.headerContent}>
            <View style={styles.headerLeft}>
              <View style={styles.logo} />
              <Text style={styles.headerTitle}>TRAINING CENTER</Text>
            </View>
            {!deviceInfo.isSmallPhone && (
              <View style={styles.headerRight}>
                <Text style={styles.headerLink}>训练模式</Text>
                <Text style={styles.headerLink}>数据分析</Text>
                <Text style={styles.headerLink}>设置</Text>
                <TouchableOpacity style={styles.headerButton} onPress={onStartTraining}>
                  <Text style={styles.headerButtonText}>开始训练</Text>
                </TouchableOpacity>
              </View>
            )}
          </View>
          <View style={styles.headerBorder} />
        </View>

        <View style={styles.mainContent}>
          {/* Stats Section */}
          <View style={styles.statsSection}>
            <Text style={styles.sidebarTitle}>今日统计</Text>
            <View style={styles.statsGrid}>
              {stats.map((stat, index) => (
                <View key={index} style={styles.statCard}>
                  <Text style={styles.statValue}>{stat.value}</Text>
                  <Text style={styles.statLabel}>{stat.label}</Text>
                  <Text style={styles.statChange}>{stat.change}</Text>
                </View>
              ))}
            </View>
          </View>

          {/* Main Title */}
          <View style={styles.mainSection}>
            <Text style={styles.mainTitle}>TRAINING_{"\n"}MODES</Text>

            {/* Featured Training */}
            <View style={styles.featuredCard}>
              <View style={styles.featuredHeader}>
                <Text style={styles.featuredBadge}>🎯 推荐训练</Text>
              </View>
              <Text style={styles.featuredTitle}>GT Protocol</Text>
              <Text style={styles.featuredDescription}>
                GT Protocol 是一个去中心化的无信任平台，专为简化和保护去中心化资产管理而设计
              </Text>

              <View style={styles.featuredStats}>
                <View style={styles.featuredStat}>
                  <Text style={styles.featuredStatValue}>$4.1M</Text>
                  <Text style={styles.featuredStatLabel}>资金筹集</Text>
                </View>
                <View style={styles.featuredStat}>
                  <Text style={styles.featuredStatValue}>28x</Text>
                  <Text style={styles.featuredStatLabel}>ATH ROI</Text>
                </View>
                <View style={styles.featuredStat}>
                  <Text style={styles.featuredStatValue}>800%</Text>
                  <Text style={styles.featuredStatLabel}>社交增长</Text>
                </View>
                <View style={styles.featuredStat}>
                  <Text style={styles.featuredStatValue}>76+</Text>
                  <Text style={styles.featuredStatLabel}>合作伙伴</Text>
                </View>
              </View>

              <TouchableOpacity style={styles.featuredButton} onPress={onStartTraining}>
                <Text style={styles.featuredButtonText}>开始训练 →</Text>
              </TouchableOpacity>
            </View>

            {/* Training Grid */}
            <View style={styles.trainingGrid}>
              {projects.map((project, index) => (
                <View key={index} style={styles.projectCard}>
                  <View style={styles.projectHeader}>
                    <Text style={styles.projectType}>{project.type.toUpperCase()}</Text>
                    <Text style={styles.projectArrow}>→</Text>
                  </View>

                  <Text style={styles.projectName}>{project.name}</Text>

                  <View style={styles.projectDetails}>
                    <View style={styles.projectDetailRow}>
                      <Text style={styles.projectDetailLabel}>资金筹集</Text>
                      <Text style={styles.projectDetailValue}>{project.funded}</Text>
                    </View>
                    <View style={styles.projectDetailRow}>
                      <Text style={styles.projectDetailLabel}>社交增长</Text>
                      <Text style={styles.projectDetailValue}>{project.growth}</Text>
                    </View>
                  </View>

                  <View style={styles.projectStats}>
                    <View style={styles.projectStat}>
                      <Text style={styles.projectStatValue}>{project.roi}</Text>
                      <Text style={styles.projectStatLabel}>ATH ROI</Text>
                    </View>
                    <View style={styles.projectStat}>
                      <Text style={styles.projectStatValue}>{project.partnerCount}</Text>
                      <Text style={styles.projectStatLabel}>合作伙伴</Text>
                    </View>
                  </View>
                </View>
              ))}
            </View>
          </View>

          {/* Action Section */}
          <View style={styles.actionSection}>
            <View style={styles.actionCard}>
              <View style={styles.actionHeader}>
                <Text style={styles.actionTitle}>准备开始训练？</Text>
                <View style={styles.orangeDot} />
              </View>
              <TouchableOpacity style={styles.actionButton} onPress={onStartTraining}>
                <Text style={styles.actionButtonText}>立即开始</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>

        {/* Bottom Section */}
        <View style={styles.bottomSection}>
          <View style={styles.bottomBorder} />
          <View style={styles.bottomContent}>
            <View style={styles.bottomLeft}>
              <Text style={styles.bottomLabel}>► 准备开始讨论</Text>
              <Text style={styles.bottomTitle}>您的训练计划？</Text>
            </View>
            <View style={styles.bottomButtons}>
              <TouchableOpacity style={styles.bottomButton}>
                <Text style={styles.bottomButtonText}>申请孵化</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.bottomButtonSecondary} onPress={onStartTraining}>
                <Text style={styles.bottomButtonSecondaryText}>申请资助</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  )
}

const createStyles = (responsive: any, deviceInfo: any) =>
  StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: "#ffffff",
    },
    scrollContent: {
      flexGrow: 1,
      padding: responsive.containerPadding,
    },
    header: {
      marginBottom: responsive.spacing.xxl,
    },
    headerContent: {
      flexDirection: "row",
      justifyContent: "space-between",
      alignItems: "center",
      paddingBottom: responsive.spacing.lg,
    },
    headerLeft: {
      flexDirection: "row",
      alignItems: "center",
    },
    logo: {
      width: responsive.sizes.header,
      height: responsive.sizes.header,
      backgroundColor: "#f97316",
      marginRight: responsive.spacing.md,
    },
    headerTitle: {
      fontSize: responsive.fontSize.sm,
      fontWeight: "500",
      color: "#000000",
    },
    headerRight: {
      flexDirection: "row",
      alignItems: "center",
      gap: responsive.spacing.lg,
    },
    headerLink: {
      fontSize: responsive.fontSize.sm,
      color: "#666666",
    },
    headerButton: {
      backgroundColor: "#f97316",
      height: responsive.sizes.header,
      paddingHorizontal: responsive.spacing.md,
      justifyContent: "center",
      alignItems: "center",
    },
    headerButtonText: {
      fontSize: responsive.fontSize.sm,
      color: "#ffffff",
      fontWeight: "500",
    },
    headerBorder: {
      height: 1,
      backgroundColor: "#e5e7eb",
    },
    mainContent: {
      flex: 1,
    },
    sidebarTitle: {
      fontSize: responsive.fontSize.sm,
      fontWeight: "500",
      color: "#666666",
      marginBottom: responsive.spacing.md,
    },
    statsSection: {
      paddingHorizontal: deviceInfo.isTablet ? 0 : responsive.spacing.md,
      marginBottom: responsive.spacing.xl,
    },
    statsGrid: {
      flexDirection: "row",
      flexWrap: "wrap",
      gap: responsive.spacing.sm,
    },
    statCard: {
      borderWidth: 1,
      borderColor: "#e5e7eb",
      padding: responsive.spacing.md,
      flex: 1,
      minWidth: deviceInfo.isSmallPhone ? "100%" : deviceInfo.isTablet ? 150 : "45%",
    },
    statValue: {
      fontSize: responsive.fontSize.xxl,
      fontWeight: "bold",
      color: "#000000",
      marginBottom: 4,
    },
    statLabel: {
      fontSize: responsive.fontSize.sm,
      color: "#666666",
      marginBottom: responsive.spacing.xs,
    },
    statChange: {
      fontSize: responsive.fontSize.xs,
      color: "#f97316",
    },
    mainSection: {
      paddingHorizontal: deviceInfo.isTablet ? 0 : responsive.spacing.md,
      marginBottom: responsive.spacing.xl,
    },
    mainTitle: {
      fontSize: responsive.fontSize.title,
      fontWeight: "bold",
      color: "#000000",
      lineHeight: responsive.fontSize.title * 1.2,
      marginBottom: responsive.spacing.xl,
    },
    featuredCard: {
      borderWidth: 1,
      borderColor: "#e5e7eb",
      padding: responsive.spacing.xl,
      marginBottom: responsive.spacing.xl,
    },
    featuredHeader: {
      marginBottom: responsive.spacing.xs,
    },
    featuredBadge: {
      fontSize: responsive.fontSize.sm,
      fontWeight: "500",
      color: "#f97316",
    },
    featuredTitle: {
      fontSize: responsive.fontSize.xl,
      fontWeight: "bold",
      color: "#000000",
      marginBottom: responsive.spacing.md,
    },
    featuredDescription: {
      fontSize: responsive.fontSize.md,
      color: "#666666",
      lineHeight: responsive.fontSize.md * 1.5,
      marginBottom: responsive.spacing.md,
    },
    featuredStats: {
      flexDirection: "row",
      flexWrap: "wrap",
      gap: responsive.spacing.sm,
      marginBottom: responsive.spacing.md,
      justifyContent: "space-between",
    },
    featuredStat: {
      flex: 1,
      minWidth: "22%",
      alignItems: "center",
    },
    featuredStatValue: {
      fontSize: responsive.fontSize.xl,
      fontWeight: "bold",
      color: "#000000",
      marginBottom: 4,
    },
    featuredStatLabel: {
      fontSize: responsive.fontSize.sm,
      color: "#666666",
    },
    featuredButton: {
      backgroundColor: "#000000",
      height: responsive.sizes.button,
      paddingHorizontal: responsive.spacing.lg,
      justifyContent: "center",
      alignItems: "center",
      alignSelf: deviceInfo.isSmallPhone ? "stretch" : "flex-start",
    },
    featuredButtonText: {
      fontSize: responsive.fontSize.sm,
      fontWeight: "500",
      color: "#ffffff",
    },
    trainingGrid: {
      gap: responsive.spacing.md,
      flexDirection: "column",
    },
    projectCard: {
      borderWidth: 1,
      borderColor: "#e5e7eb",
      padding: responsive.spacing.lg,
      marginBottom: responsive.spacing.md,
      width: "100%",
    },
    projectHeader: {
      flexDirection: "row",
      justifyContent: "space-between",
      alignItems: "center",
      marginBottom: responsive.spacing.md,
    },
    projectType: {
      fontSize: responsive.fontSize.xs,
      color: "#666666",
      letterSpacing: 1,
    },
    projectArrow: {
      fontSize: responsive.fontSize.md,
      color: "#9ca3af",
    },
    projectName: {
      fontSize: responsive.fontSize.xl,
      fontWeight: "bold",
      color: "#000000",
      marginBottom: responsive.spacing.md,
    },
    projectDetails: {
      gap: responsive.spacing.sm,
      marginBottom: responsive.spacing.lg,
    },
    projectDetailRow: {
      flexDirection: "row",
      justifyContent: "space-between",
    },
    projectDetailLabel: {
      fontSize: responsive.fontSize.sm,
      color: "#666666",
    },
    projectDetailValue: {
      fontSize: responsive.fontSize.sm,
      fontWeight: "500",
      color: "#000000",
    },
    projectStats: {
      flexDirection: "row",
      justifyContent: "space-between",
    },
    projectStat: {},
    projectStatValue: {
      fontSize: responsive.fontSize.xl,
      fontWeight: "bold",
      color: "#000000",
      marginBottom: 4,
    },
    projectStatLabel: {
      fontSize: responsive.fontSize.sm,
      color: "#666666",
    },
    actionSection: {
      paddingHorizontal: deviceInfo.isTablet ? 0 : responsive.spacing.md,
      marginBottom: responsive.spacing.xl,
    },
    actionCard: {
      borderWidth: 1,
      borderColor: "#e5e7eb",
      padding: responsive.spacing.md,
    },
    actionHeader: {
      flexDirection: "row",
      justifyContent: "space-between",
      alignItems: "center",
      marginBottom: responsive.spacing.md,
    },
    actionTitle: {
      fontSize: responsive.fontSize.sm,
      fontWeight: "500",
      color: "#000000",
    },
    orangeDot: {
      width: 12,
      height: 12,
      backgroundColor: "#f97316",
      borderRadius: 6,
    },
    actionButton: {
      height: responsive.sizes.button,
      backgroundColor: "#f97316",
      justifyContent: "center",
      alignItems: "center",
    },
    actionButtonText: {
      fontSize: responsive.fontSize.sm,
      fontWeight: "500",
      color: "#ffffff",
    },
    bottomSection: {
      marginTop: responsive.spacing.xxl,
    },
    bottomBorder: {
      height: 1,
      backgroundColor: "#e5e7eb",
      marginBottom: responsive.spacing.xl,
    },
    bottomContent: {
      flexDirection: "column",
      alignItems: "stretch",
      gap: responsive.spacing.md,
    },
    bottomLeft: {},
    bottomLabel: {
      fontSize: responsive.fontSize.sm,
      color: "#666666",
    },
    bottomTitle: {
      fontSize: responsive.fontSize.lg,
      fontWeight: "bold",
      color: "#000000",
      marginTop: 4,
    },
    bottomButtons: {
      flexDirection: "column",
      gap: responsive.spacing.sm,
    },
    bottomButton: {
      backgroundColor: "#f97316",
      height: responsive.sizes.button,
      paddingHorizontal: responsive.spacing.lg,
      justifyContent: "center",
      alignItems: "center",
      minWidth: deviceInfo.isSmallPhone ? "100%" : 120,
    },
    bottomButtonText: {
      fontSize: responsive.fontSize.sm,
      fontWeight: "500",
      color: "#ffffff",
    },
    bottomButtonSecondary: {
      backgroundColor: "#f3f4f6",
      height: responsive.sizes.button,
      paddingHorizontal: responsive.spacing.lg,
      justifyContent: "center",
      alignItems: "center",
      minWidth: deviceInfo.isSmallPhone ? "100%" : 120,
    },
    bottomButtonSecondaryText: {
      fontSize: responsive.fontSize.sm,
      fontWeight: "500",
      color: "#000000",
    },
  })
